@import "~lark-theme/theme/oriental-blue";

$theme-color-name: oriental-blue;

.theme {

  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  // **************************************             滚动条               *************************************** //
  // ************************************************************************************************************** //
  // ************************************************************************************************************** //

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-corner {
    background: #1c222b;
  }

  ::-webkit-scrollbar-track {
    @extend %#{$theme-color-name}-element-ui-background-color-base;
    border-radius: 0px;
  }

  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  // **************************************           element-ui            *************************************** //
  // ************************************************************************************************************** //
  // ************************************************************************************************************** //

  //分页组件
  .pagination-container {
    .el-pagination__jump {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }

    .btn-prev, .btn-next {
      @extend %#{$theme-color-name}-element-ui-background-color-base;
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }

    .el-pager {
      li:not(.disabled).active {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
      }
    }

    .el-pagination__total {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  /* 下拉 dropdown-menu */
  .el-dropdown-menu__item {
    padding-right: 3px !important;
    padding-left: 3px !important;
  }

  /* MessageBox.confirm 提示框 */
  .el-message-box {
    @extend %#{$theme-color-name}-element-ui-background-color-base;
    border: none;

    .el-message-box__title {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }

    .el-message-box__message {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  /* Message 提示 */
  .el-message--success, .el-message--error, .el-message--warning, .el-message--info {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    @extend %#{$theme-color-name}-element-ui-border-color-base;

    .el-message__content {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  .el-message--success {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    @extend %#{$theme-color-name}-element-ui-border-color-base;

    .el-message__content {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  //  时间选择组件样式
  .el-date-table {
    th {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  .el-date-table {
    td.in-range {
      div {
        @extend %#{$theme-color-name}-element-ui-background-color-base;
      }
    }
  }

  .el-range-editor.el-input__inner {
    @extend %#{$theme-color-name}-element-ui-background-color-base;
  }

  .el-date-editor {


    .el-range-separator {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }


  //  时间选择组件下拉模板样式
  .el-picker-panel__footer {
    @extend %#{$theme-color-name}-element-ui-background-color-base;
  }

  .el-picker-panel {
    @extend %#{$theme-color-name}-element-ui-font-color-base;
    @extend %#{$theme-color-name}-element-ui-background-color-base;
  }

  //  输入框样式
  .el-range-input {
    @extend %#{$theme-color-name}-element-ui-font-color-base;
    @extend %#{$theme-color-name}-element-ui-background-color-base;
  }

  .el-input {
    //  输入框内容
    .el-input__inner {
      @extend %#{$theme-color-name}-element-ui-border-color-base;
      @extend %#{$theme-color-name}-element-ui-background-color-base;
      @extend %#{$theme-color-name}-element-ui-border-radius-full;
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;

      &:focus {
        @extend %#{$theme-color-name}-element-ui-border-color-base;
      }

      &.is-focus {
        .el-input__inner {
          @extend %#{$theme-color-name}-element-ui-border-color-base;
        }
      }

      &:hover {
        @extend %#{$theme-color-name}-element-ui-border-color-base;
      }
    }

    //  插槽
    .el-input-group__append {
      @extend %#{$theme-color-name}-element-ui-border-color-base;
      @extend %#{$theme-color-name}-element-ui-background-color-lighter;
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }
  }

  //  数字输入框
  .el-input-number {
    .el-input-number__decrease, .el-input-number__increase {
      background-color: transparent;
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }
  }


  //  树形组件
  .el-tree-node:focus > .el-tree-node__content {
    @extend %#{$theme-color-name}-element-ui-background-color-lighter;
  }

  .el-tree {
    @extend %#{$theme-color-name}-element-ui-font-color-base;

    &.el-tree--highlight-current {
      .el-tree-node.is-current {
        & > .el-tree-node__content {
          @extend %#{$theme-color-name}-element-ui-background-color-minor;
        }
      }
    }

    .el-tree-node__content {
      @extend %#{$theme-color-name}-element-ui-background-color-base;
    }
  }

  //  按钮
  .el-button--primary, .el-button--default, .el-button--danger, .el-button--cyan, .el-button--warning {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    @extend %#{$theme-color-name}-element-ui-border-color-base;
    @extend %#{$theme-color-name}-element-ui-border-radius-full;
    @extend %#{$theme-color-name}-element-ui-font-color-base;
    @extend %#{$theme-color-name}-element-ui-font-size-base;

    &:hover {
      @extend %#{$theme-color-name}-element-ui-background-color-minor;
      @extend %#{$theme-color-name}-element-ui-border-color-base;
      @extend %#{$theme-color-name}-element-ui-border-radius-full;
    }
  }

  //表格内按钮
  .el-table .fixed-width .el-button--mini {
    @extend .mc-btn-hover
  }

  //  表格
  .mc-table, .project-table {
    .el-table {
      background-color: transparent;

      .el-table__expand-icon {
        .el-icon.el-icon-arrow-right {
          @extend %#{$theme-color-name}-element-ui-font-color-base;

          &:hover {
            @extend %#{$theme-color-name}-element-ui-font-color-light;
          }
        }
      }
    }

    .el-table th.gutter {
      display: table-cell !important;
    }

    .el-table td {
      background-color: transparent;
    }


    /*双数行背景色*/
    .el-table--striped .el-table__body tr.el-table__row--striped td {
      @extend %#{$theme-color-name}-element-ui-background-color-base;
    }

    /* 单行及表头背景颜色 */
    .el-table, .el-table th, .el-table tr, tr.el-table__row td {
      @extend %#{$theme-color-name}-element-ui-background-color-base;
    }


    /* 表格表头字体颜色 */
    .el-table thead tr th div {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
      @extend %#{$theme-color-name}-element-ui-font-weight-base;
    }

    /* 表格内边框 */
    .el-table th.is-leaf, .el-table td {
      @extend %#{$theme-color-name}-element-ui-table-bottom-border-color;
    }

    /* 表格内字体色 */
    .el-table {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }

    /* 表格鼠标悬浮 */
    .el-table--enable-row-hover .el-table__body tr {
      &:hover {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;

      }
    }
  }

  //  表单
  .el-form {
    .el-form-item {
      .el-form-item__label {
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
      }

      .land-text {
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
      }
    }
  }

  //  分割线
  .el-divider {
    .el-divider__text {
      background-color: transparent;
    }
  }

  //  抽屉
  .el-drawer__wrapper.el-drawer__wrapper.el-drawer__wrapper {
    .el-drawer__container {
      .el-drawer__header {
        & > :first-child, .el-drawer__close-btn {
          @extend %#{$theme-color-name}-element-ui-font-color-base;
          @extend %#{$theme-color-name}-element-ui-font-size-base;

          &:hover {
            @extend %#{$theme-color-name}-element-ui-font-color-light;
          }
        }
      }

      .el-drawer {
        @extend %#{$theme-color-name}-element-ui-background-color-base;
      }
    }
  }

  //  tabs
  .el-tabs.el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__item {
          @extend %#{$theme-color-name}-element-ui-font-color-base;
          @extend %#{$theme-color-name}-element-ui-font-size-base;

          &.is-active {
            @extend %#{$theme-color-name}-element-ui-font-color-light;
          }


          .tab-title-content {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0 20px;
          }
        }
      }
    }
  }

  // 下拉选择框
  .el-cascader {
    .el-input {
      &.is-focus {
        .el-input__inner {
          @extend %#{$theme-color-name}-element-ui-border-color-base;
          @extend %#{$theme-color-name}-element-ui-border-radius-full;
        }
      }

      .el-input__inner {
        @extend %#{$theme-color-name}-element-ui-border-color-base;
        @extend %#{$theme-color-name}-element-ui-border-radius-full;
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
        @extend %#{$theme-color-name}-element-ui-background-color-base;
      }
    }
  }

  //  折叠面板
  .el-collapse {
    .el-collapse-item {
      background-color: transparent;

      .el-collapse-item__header {
        background-color: transparent;
      }

      .el-collapse-item__wrap {
        background-color: transparent;

        .el-collapse-item__content {
          @extend %#{$theme-color-name}-element-ui-font-color-base;
          @extend %#{$theme-color-name}-element-ui-font-size-base;
        }
      }
    }

    .el-collapse-item__header {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;

      span, i {
        &:hover {
          @extend %#{$theme-color-name}-element-ui-font-color-light;
          @extend %#{$theme-color-name}-element-ui-font-size-base;
        }
      }
    }

    .el-collapse-item.is-active {
      .el-collapse-item__header.is-active {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
      }
    }
  }


  .mc-btn-hover {
    cursor: pointer;
    @extend %#{$theme-color-name}-element-ui-font-color-light;

    &:hover {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }


  /* 下拉框select  */

  .el-select-dropdown__list {
    @extend %#{$theme-color-name}-element-ui-background-color-base;

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      @extend %#{$theme-color-name}-element-ui-background-color-minor;
    }

    .el-select-dropdown__item {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  /* el-dropdown-menu Dropdown 下拉菜单 */
  .el-dropdown-menu {
    @extend %#{$theme-color-name}-element-ui-background-color-base;

    .el-dropdown-menu__item {
      @extend %#{$theme-color-name}-element-ui-font-color-base;

      &:hover {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
      }
    }
  }

  /*  下拉框弹出面板  */
  &.el-popper.el-cascader__dropdown {
    background-color: transparent !important;
    @extend %#{$theme-color-name}-element-ui-border-color-base;

    .el-cascader-panel {
      .el-cascader-menu {
        @extend %#{$theme-color-name}-element-ui-background-color-base;

        .el-cascader-menu__list {
          .el-cascader-node {
            &.is-active {
              @extend %#{$theme-color-name}-element-ui-background-color-minor;

              .el-cascader-node__label {
                @extend %#{$theme-color-name}-element-ui-font-color-base;
                @extend %#{$theme-color-name}-element-ui-font-size-base;
              }
            }

            &.is-selectable.in-active-path, &.is-selectable:focus, &:hover {
              @extend %#{$theme-color-name}-element-ui-background-color-minor;
            }

            span {
              @extend %#{$theme-color-name}-element-ui-font-color-base;
              @extend %#{$theme-color-name}-element-ui-font-size-base;
            }
          }
        }
      }
    }
  }

  // 文本域
  .el-textarea {
    .el-textarea__inner {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
      @extend %#{$theme-color-name}-element-ui-background-color-base;
      @extend %#{$theme-color-name}-element-ui-border-color-base;


      &:hover {
        @extend %#{$theme-color-name}-element-ui-border-color-base;
      }
    }
  }

  //  分页组件
  .el-pagination__total, .el-pagination__jump {
    @extend %#{$theme-color-name}-element-ui-font-color-base;
    @extend %#{$theme-color-name}-element-ui-font-size-base;
  }

  .el-pagination.is-background {
    .btn-next {
      @extend %#{$theme-color-name}-element-ui-border-color-base;
    }

    .btn-prev {
      @extend %#{$theme-color-name}-element-ui-border-color-base;
    }
  }

  //  上传文件组件
  .el-upload-list {
    .el-upload-list__item {
      background-color: transparent;

      &:hover, &:focus {
        @extend %#{$theme-color-name}-element-ui-border-color-base;
      }

      .el-upload-list__item-name {
        background-color: transparent;
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
      }
    }
  }

  //  复选框
  .el-checkbox {
    .el-checkbox__label {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }
  }
}
